<template>
  <div class="container">
    <div class="login">
      <div class="input">
        <i class="iconfont">&#xe62d;</i>
        <input type="text" class="input-text" v-model.trim="username" ref="username" placeholder="账号">
      </div>
      <div class="input">
        <i class="iconfont">&#xe7b8;</i>
        <input type="password" class="input-text" v-model.trim="password" ref="password" placeholder="密码">
      </div>
      <div class="login-btn">
        <button class="btn" @click="login">登录</button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import http from '../utils/http'
import api from '../utils/api'
import { ERR_OK } from '../utils/config'

export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async login () {
      if (this.username === '') {
        this.$vux.toast.text('账号不能为空！')
        this.$refs.username.focus()
        return
      }
      if (this.password === '') {
        this.$vux.toast.text('密码不能为空！')
        this.$refs.password.focus()
        return
      }
      const params = {
        query: {
          user: this.username,
          password: this.password
        }
      }
      const res = await http.post(api.externalLogin, params)
      // console.log(res)
      if (res.status === ERR_OK) {
        this.setShopInfo(res.data)
        localStorage.setItem('mzjShopInfo', JSON.stringify(res.data))
        this.$vux.toast.text('登陆成功')
        this.username = ''
        this.password = ''
        this.$router.replace({
          path: '/index'
        })
      }
    },
    ...mapMutations({
      setShopInfo: 'SET_MZJSHOPINFO'
    })
  }
}
</script>

<style lang="stylus" scoped>
.container
  width 100%
  height 100%
  background-color #f6f6f6
  display flex
  align-items center
  justify-content center
  .login
    width 86%
    margin 0 auto
    .input
      width 100%
      height 0.96rem
      margin 0 auto 0.4rem
      padding 0 0.4rem
      background #ffffff
      border-radius 0.48rem
      display flex
      align-items center
      box-shadow: 0 6px 8px 0 rgba(255, 148, 201, 0.1)
      .iconfont
        font-size 0.4rem
      .input-text
        margin-left 0.2rem
        width 100%
        height 0.96rem
        color #666
    .login-btn
      margin-top 0.6rem
      .btn
        width 100%
        height 0.96rem
        border-radius 0.48rem
        background-image -webkit-gradient(linear,0% 0%, 100% 100%, from(#FF9696), to(#FF4A8C))
        color: #fff
        box-shadow 0 4px 10px 0 rgba(255, 101, 177, 0.4)
        font-size 0.4rem
        letter-spacing 0.1rem
        padding-left 0.1rem
</style>
